import React, { Component } from 'react';
import { withRouter, Link, Switch, Route, HashRouter as Router } from 'react-router-dom'
import { Menu, Icon } from 'antd';

import AccountInfo from './accountInfo'
import PersonalInfo from './personalInfo'
import Step1 from './step1'
import Step2 from './step2'
import Step3 from './step3'

import "./../../static/personal/personalStyle.styl"
import $ from "jquery";

export default class PersonalStyle extends React.Component {
  changeSelect() {
    let href = window.location.href;
    if (href.split("personalStyle#/")[1] === "personalInfo") {
      $(".p-siderBar li:last-child").addClass("ant-menu-item-selected").siblings().removeClass("ant-menu-item-selected")
    }
  }
  componentDidMount() {
    this.changeSelect();
  }
  setKey(key, ) {
    sessionStorage.setItem('personalkey', key)
  }
  render() {
    return (
      <Router>
        <div className="p-cistern">
          <div className="p-siderBar">
            <Menu mode="inline" defaultSelectedKeys={[sessionStorage.getItem('personalkey') || 1]}>
              <Menu.Item key="1"
                onClick={() => {
                  this.setKey('1')
                }}
              >
                <Link to="/personalStyle/accountInfo"><span>账户信息</span></Link>
              </Menu.Item>
              <Menu.Item key="2"
                onClick={() => {
                  this.setKey('2')
                }}
              >
                <Link to="/personalStyle/personalInfo"><span>个人资料</span></Link>
              </Menu.Item>
            </Menu>
          </div>
          <div className="p-content">
            <Switch>
              <Route path='/personalStyle/accountInfo' component={AccountInfo} />
              <Route path='/personalStyle/personalInfo' component={PersonalInfo} />
              <Route path='/personalStyle/step1' component={Step1} />
              <Route path='/personalStyle/step2' component={Step2} />
              <Route path='/personalStyle/step3' component={Step3} />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}